<script lang="ts" setup>
import RangePicker from '@/components/common/RangePicker.vue'
import { ClassChangeApi } from '@/apis'
import { useTable } from '@/hooks/modules/useTable'
import { useForm } from '@/hooks'
import CancelList from '@/views/education/cancel/CancelList.vue'

defineOptions({
  name: 'ClassCancelRecord',
})

const router = useRouter()

const { form } = useForm<ClassChangeApi.ClassCancelQuery>({
  studentId: undefined,
  grade: undefined,
  changeType: 'CANCEL_CLASS',
  operateSource: undefined,
  operateStatus: undefined,
  dateFrom: undefined,
  dateTo: undefined,
})

const {
  tableData: records,
  loading,
  pagination,
  search,
} = useTable(pagination => ClassChangeApi.getCancelPage({ ...form, ...pagination }))

const filterCollapsed = ref(true)

const onCreate = () => {
  router.push({ path: '/education/class/cancel/create' })
}

watch(form, () => search(), { immediate: true, deep: true })
</script>

<template>
  <ProPage title="退班退课记录">
    <template #extra>
      <a-button v-permission="['edu:class-cancel:manage']" type="primary" @click="onCreate">
        <template #icon>
          <icon-plus />
        </template>
        退班退课
      </a-button>
    </template>
    <a-space direction="vertical" size="small">
      <a-space>
        <label class="label">学生</label>
        <StudentSelect v-model="form.studentId" class="min-w-300px!" />
        <CollapseButton v-model="filterCollapsed" />
      </a-space>
      <div v-show="filterCollapsed">
        <a-space wrap>
          <label class="label">班级筛选</label>
          <ClassSelect v-model="form.classId" class="min-w-300px" />
          <YearTermCascader v-model:class-year="form.classYear" v-model:term="form.term" class="min-w-120px" check-strictly />
          <DictSelect v-model="form.grade" type="select" code="Grade" placeholder="年级" class="min-w-120px!" multiple />
          <DictSelect v-model="form.subject" type="select" code="Subject" placeholder="科目" class="min-w-120px!" />
          <ClassTypeSelect v-model="form.classTypeId" placeholder="班型" class="!min-w-120px" />
        </a-space>
        <a-space wrap>
          <label class="label">其它条件</label>
          <DictSelect v-model="form.classCategory" type="button" code="ClassCategoryEnum" placeholder="类型" />
          <EmployeeSelect v-model="form.leadTeacherId" type="LEAD_TEACHER" placeholder="主讲老师" class="!w-150px" />
          <ClassroomCascader v-model:campus-id="form.campusId" v-model:classroom-id="form.classroomId" class="min-w-150px!" check-strictly />
          <RangePicker v-model:from="form.createDateFrom" v-model:to="form.createDateTo" :time="false"/>
        </a-space>
      </div>
    </a-space>
    <CancelList v-model:form="form" :records :loading :pagination @refresh="search" />
  </ProPage>
</template>

<style lang="less" scoped>
.label {
  display: inline-block;
  width: 60px;
  text-align: right;
  flex-shrink: 0;
  margin-right: 10px;
}
.tooltip-content {
  padding: 10px;
  background-color: var(--color-bg-popup);
  border-radius: 4px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
}
</style>
